<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-expansion-item
      class="shadow-1 overflow-hidden"
      style="border-radius: 30px"
      icon="explore"
      label="Counter"
      @show="startCounting"
      @hide="stopCounting"
      header-class="bg-primary text-white"
      expand-icon-class="text-white"
    >
      <t-card>
        <t-card-section>
          Counting: <t-badge color="secondary">{{ counter }}</t-badge
          >. Will only count when opened, using the show/hide events to control
          count timer.
        </t-card-section>
      </t-card>
    </t-expansion-item>
  </div>
</template>

<script>
  import { onBeforeUnmount, ref } from 'vue';

  export default {
    setup() {
      const counter = ref(0);
      let timer;

      function stopCounting() {
        clearInterval(timer);
      }

      onBeforeUnmount(stopCounting);

      return {
        counter,

        startCounting() {
          timer = setInterval(() => {
            counter.value++;
          }, 1000);
        },

        stopCounting,
      };
    },
  };
</script>
